<template>
  <div class="user-layout">
    <div class="title">
      <slot name="title"></slot>
    </div>
    <div class="main shadow">
      <slot name="main"></slot>
    </div>
    <arrow />
  </div>
</template>

<script>
import Arrow from '@/components/Arrow'
export default {
  name: 'UserLayout',
  components: { Arrow }
}
</script>

<style scoped lang="stylus">
.user-layout
  height 300px
  background-image url("../../../assets/images/user.png")
  background-size cover
  background-repeat no-repeat
  background-position center bottom
  margin-bottom -180px
  padding-top 10px
  box-sizing border-box
  .title
    margin-top 30px
    text-align left
    font-weight 700
    font-size 16px
    padding 10px 20px
    letter-spacing 1px
    text-indent 10px
    color white
  .main
    background white
    padding 25px 15px
    margin 20px
    border-radius 10px
    text-align left
    color #333
    boorder 1px solid #eee
</style>
